<!--
 * @Descripttion: 直播列表
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-08-20 15:22:25
-->
<template>
  <div class="lb-sys-sproconfig">
    <top-nav></top-nav>
    <div class="page-main">
      <lb-tips>
        <p>
          找人代付功能目前仅支持单人代付。单人代付是一个好友帮忙代付全部款项，
          启用代付功能后，代付发起人（买家）下单后，
          可将订单分享给小伙伴（微信群、微信好友），请他帮忙付款。
        </p>
        <p class="space-lg"></p>
        <p>注：代付订单发生退款时，将原路退回付款人微信账户</p>
      </lb-tips>
      <div class="space-md"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="120px"
      >
        <el-form-item label="分享语" prop="help_pay_title">
          <el-input
            v-model="subForm.help_pay_title"
            maxlength="30"
            show-word-limit
            placeholder="请输入分享语"
          ></el-input>
          <lb-tool-tips
            >商家可以配置转发文案，来引导代付人付款。文案字数不超过30个字</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="分享图" prop="help_pay_img">
          <lb-cover
            :fileList="subForm.help_pay_img"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 500 * 400</lb-tool-tips>
        </el-form-item>
        <el-form-item label="是否启用" prop="help_pay_status">
          <el-radio-group v-model="subForm.help_pay_status">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <lb-button @click="submitInfo" type="primary">{{
            $t('action.save')
          }}</lb-button>
          <lb-button @click="toSetDefault" type="danger"
            >恢复默认设置</lb-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      default: {
        help_pay_title: '我有一笔订单需要支付，请帮我代付吧，非常感谢你',
        help_pay_img: 'https://lbqny.migugu.com/admin/helppay/share.jpg'
      },
      subForm: {
        help_pay_title: '',
        help_pay_img: [],
        help_pay_status: 0
      },
      subFormRules: {
        help_pay_title: {
          required: true,
          type: 'string',
          message: '请输入分享语',
          trigger: 'blur'
        },
        help_pay_img: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        help_pay_status: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'blur'
        }
      },
      options: [],
      value: [],
      loading: false
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let { code, data } = await this.$api.helppayConfigInfo()
      console.log(code, data)
      if (code !== 200) return
      data.help_pay_img = [{ url: data.help_pay_img }]
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      console.log(this.subForm)
    },
    getCover (imgs) {
      this.subForm.help_pay_img = imgs
    },
    submitInfo () {
      let flag = true
      this.$refs['subForm'].validate(valid => {
        if (!valid) flag = false
      })
      if (flag) {
        let param = JSON.parse(JSON.stringify(this.subForm))
        param.help_pay_img = param.help_pay_img[0].url
        this.$api.helppayConfigUpdate(param).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successSub'))
          }
        })
      }
    },
    toSetDefault () {
      let param = this.default
      param.help_pay_status = this.subForm.help_pay_status
      this.$api.helppayConfigUpdate(param).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successSub'))
          this.getDetail()
        }
      })
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 300px;
}
.dialog-inner {
  height: 300px;
  .el-image {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
}
</style>
